<template>
  <view :class="check">
    <cu-custom bgColor="bgcolorfff" :isBack="true">
      <block slot="content"><view class="toptext">我的收藏</view></block>
    </cu-custom>

    <view class="myfavorite-pic" v-if="cardlist.length > 0">
      <!-- 瀑布流卡片 -->
      <view class="waterfall_box">
        <waterfall :value="cardlist" ref="waterfall" :column="2" :gutter="0">
          <template v-slot="{ item }">
            <view class="waterfall_box_cen"
              ><Pullcard
                :boxBorder="false"
                :item="item"
                :likeType="1"
                @likeCard="likeCard"
                >自定义模块</Pullcard
              ></view
            >
          </template>
        </waterfall>
      </view>
    </view>

    <view class="no-col" v-if="showCard == true">
      <image
        src="https://static.77du.net/template/ciff/img/no.png"
        mode="widthFix"
      />
      <text>快去收集些小心心吧~</text>
      <view @click="gogo"><text>去逛逛</text></view>
    </view>

    <loading v-if="loadingflag"></loading>
  </view>
</template>

<script>
import waterfall from "../../conpoments/waterfall";
import Pullcard from "../../conpoments/pullcard";
export default {
  data() {
    return {
      cardlist: [],
      index: 0,
      hasData: true,
      stop: true,
      loadingflag: false,
      showCard: false,
    };
  },
  onLoad() {
    this.firstFresh();
  },
  onShow() {
    console.log(this.cardlist.length);
  },
  computed: {
    check() {
      return this.cardlist.length == 0 ? "myfavorite overdata" : "myfavorite";
    },
  },
  //   上拉加载
  onReachBottom() {
    if (this.hasData && this.stop) {
      this.loadingflag = true;
      this.getFavData();
    }
  },
  onPullDownRefresh() {
    this.loadingflag = true;
    this.firstFresh();
  },
  methods: {
    getFavData(first = false) {
      if (this.hasData) {
        if (!this.stop) return;
        this.index++;
        this.$http(
          {
            method: "get",
            url: "/user/subject/favorite",
          },
          { index: this.index, size: 10 }
        ).then((res) => {
          this.stop = true;
          uni.stopPullDownRefresh();
          this.loadingflag = false;
          if (res[1].data.code === "000000") {
            const { content } = res[1].data.data;
            if (content != null) {
              if (first) {
                this.cardlist = content;
              } else {
                this.$refs.waterfall.append(content || []);
              }
            } else {
              if (first) {
                this.showCard = true;
              }
              this.hasData = false;
            }
          }
        });
      }
    },
    gogo() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    likeCard(likeIndex, item) {
      this.deletCard(item);
    },
    async deletCard(item) {
      this.loadingflag = true;
      let res = await this.$http({
        url: "/subject/favorite?subjectIds=" + item.id,
        method: "delete",
      });
      this.loadingflag = false;
      if (res[1].data.code === "000000") {
        uni.showToast({
          title: "取消收藏",
          icon: "none",
          duration: 1000,
        });
        // this.index = 0;
        // this.hasData = true;
        // this.content = [];
      }
    },
    firstFresh() {
      this.showCard = false;
      this.cardlist = [];
      this.index = 0;
      this.hasData = true;
      this.getFavData(true);
    },
  },
  components: {
    waterfall,
    Pullcard,
  },
};
</script>

<style lang="scss" scoped>
.myfavorite {
  height: 100vh;
}
.overdata {
  background-color: #ffffff;
  overflow: hidden;
}
.myfavorite-pic {
  padding-top: 23rpx;
  background-color: #ffffff;
  min-height: 100vh;
}
.no-col {
  text-align: center;
  background-color: #ffffff;
  padding-top: 194rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  overflow: hidden;
  > text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(162, 162, 162, 1);
    line-height: 38rpx;
    margin-top: 50rpx;
    margin-bottom: 70rpx;
  }
  > view {
    width: 265rpx;
    height: 72rpx;
    background: rgba(255, 0, 0, 1);
    border-radius: 37rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    > text {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }
  }
  image {
    width: 334rpx;
    display: inline-block;
  }
}
.waterfall_box {
  margin-top: 32rpx;
  width: 100vw;
  .waterfall_box_cen {
    margin-top: 23rpx;
  }
}
.kongTab {
  height: 98rpx;
}
</style>
